<template>
	<div>
		<div align="left">
			<el-button type="info" @click="back">返回上级</el-button>
			<el-button class="filter-item" v-if="permission_add" type="primary"  @click="handleCreate">新增</el-button>
		</div>
		<el-divider></el-divider>
		<!-- 列表 -->
		<el-table :data="dataList" minheight="calc(100VH - 270px)"  highlight-current-row border style="width: 100%" v-loading="loading">
			<el-table-column label="序号" type="index" align="center" width="50"></el-table-column>
			<el-table-column label="元素名称" prop="elementName" align="center"></el-table-column>
			<el-table-column label="权限编码" prop="authCode" align="center"></el-table-column>
			<el-table-column label="资源路径" prop="elementUri" align="center"></el-table-column>
			<el-table-column label="资源类型 " prop="elementType" align="center"></el-table-column>
			<el-table-column label="方法类别" prop="elementMethod" align="center"></el-table-column>
			<el-table-column label="操作" align="center" width="150" fixed="right">
				<template slot-scope="scope">
					<el-button v-if="permission_view" type="text" size="small" @click="handleView(scope.row.id)">查看</el-button>
					<el-button v-if="permission_edit" type="text" size="small" @click="handleEdit(scope.row.id)">修改</el-button>
					<el-button v-if="permission_delete" type="text" size="small" @click="handleDelete(scope.row.id)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		
		<!-- 新增/修改弹出框 -->
		<template>
			<el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
				<el-form :model="dataForm" ref="dataForm" :rules="dataRule" @keyup.enter.native="dataFormSubmitHandle()" label-width="90px">
					<el-form-item label="元素名称" prop="elementName">
						<el-input v-if="dialogStatus == 'create'" v-model="dataForm.elementName" placeholder="请输入元素名称" ></el-input>
						<el-input v-else v-model="dataForm.elementName"  readonly></el-input>
					</el-form-item>
					<el-form-item label="权限编码" prop="authCode">
						<el-input v-if="dialogStatus == 'create'" v-model="dataForm.authCode" placeholder="请输入元素名称"></el-input>
						<el-input v-else v-model="dataForm.authCode"  ></el-input>
					</el-form-item>
					<el-form-item label="资源路径" prop="elementUri">
						<el-input v-model="dataForm.elementUri" placeholder="请输入资源路径"></el-input>
					</el-form-item>
					<el-form-item label="资源类型" prop="elementType">
						<el-radio-group v-model="dataForm.elementType">
							<el-radio label="uri">地址</el-radio>
							<el-radio label="button">按钮</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="请求方式" prop="elementMethod">
						<el-radio-group v-model="dataForm.elementMethod">
							<el-radio label="GET">GET</el-radio>
							<el-radio label="PUT">PUT</el-radio>
							<el-radio label="POST">POST</el-radio>
							<el-radio label="DELETE">DELETE</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="资源描述" prop="elementDesc">
						<el-input v-model="dataForm.elementDesc" placeholder="请输入资源描述"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="cancel('dataForm')">取 消</el-button>
					<el-button v-if="dialogStatus=='create'" type="primary" @click="submitCreate('dataForm')">确 定</el-button>
					<el-button v-else type="primary" @click="submitUpdate('dataForm')">修 改</el-button>
				</div>
			</el-dialog>
		</template>
	</div>
</template>

<script>
	import { mapGetters } from 'vuex'
	import { findSystemElementListByMenuCode, findSystemElementDetail,addSystemElement,editSystemElement,deleteSystemElement ,validataElementExist ,validataElementAuthCodeExist} from '@/api/admin/systemElement'
	import eventBus from '@/utils/communication'
	export default {
		data() {
			var validateElementName = (rule, value, callback) =>{
				let params = {
					validParam: value,
					menuCode: this.menuCode
				}
				if(this.dialogStatus == 'create'){
					validataElementExist(params).then(() =>{
						callback();
					}).catch((err) => {
						return callback(new Error(err.data.responseMessage));
					});
				}else{
					callback();
				}
			};
			var validateAuthCode = (rule, value, callback) =>{
				let params = {
					validParam: value,
					menuCode: this.menuCode
				}
				if(this.dialogStatus == 'create'){
					validataElementAuthCodeExist(params).then(() =>{
						callback();
					}).catch((err) => {
						return callback(new Error(err.data.responseMessage));
					});
				}else{
					callback();
				}
			};
			return {
				loading: true,
				menuCode: '',
				// 数据列表el-table
				dataList: [],
				elementDetail: {},
				dialogFormVisible: false,
				// 权限按钮控制
				permission_add: false,
				permission_edit: false,
				permission_delete: false,
				permission_view: false,
				dataForm: {
					id: '',
					elementName: '',
					authCode: '',
					elementUri: '',
					menuCode: '',
					elementDesc: '',
					elementType: '',
					elementMethod: ''
				},
				textMap: {
					update: '编辑元素',
					create: '新增元素'
				},
				dialogStatus: '',
				dataRule:{
					elementName: [
						{ required: true, message: '请输入元素名', trigger: 'blur'},
						{ validator: validateElementName, trigger: 'blur' }
					],
					authCode: [
						{ required: true, message: '请输入授权编号', trigger: 'blur'},
						{ validator: validateAuthCode, trigger: 'blur' }
					],
					elementType: [
						{ required: true, message: '请选资源类型', trigger: 'blur'},
					],
					elementMethod: [
						{ required: true, message: '请选择请求方式', trigger: 'blur'},
					],
				}
			}
		},
		computed: {
			key() {
				return this.$route.path
			},
			...mapGetters([
				'elementList'
			])
		},
		created() {
			this.menuCode = this.$route.query.menuCode
			this.dataForm.menuCode = this.$route.query.menuCode
			// 初始化获取数据列表
			this.getDateList(this.menuCode)
			//初始化按钮权限
			this.permission_add = this.elementList['base:menu:add']
			this.permission_edit = this.elementList['base:menu:edit']
			this.permission_delete = this.elementList['base:menu:delete']
			this.permission_view = this.elementList['base:menu:detail']
		},
		methods: {
			//获取元素列表
			getDateList(val) {
				this.loading = true
				findSystemElementListByMenuCode(val).then(response => {
					this.dataList = response.data.responseData
				})
				this.loading = false
			},
			//查看元素详情
			handleView(val) {
				findSystemElementDetail(val).then(res => {
					console.log('查询返回结果', res)
					this.elementDetail = res.data.responseData
				})
			},
			//删除元素
			handleDelete(val) {
				this.$confirm('此操作将永久删除, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					deleteSystemElement(val).then(() => {
						this.$notify({
							title: '删除成功',
							message: '删除元素成功',
							type: 'success',
							duration: 2000,
							onClose: this.getDateList(this.menuCode)
						});
					});
				});
			},
			//返回上级菜单
			back() {
				eventBus.$emit('parentCode',this.dataForm.menuCode)
				this.$router.go(-1)
			},
			handleCreate(){
				this.dialogStatus = 'create'
				this.dialogFormVisible = true
				this.initCreate()
			},
			initCreate(){
				this.dataForm.id = '',
				this.dataForm.elementName = '',
				this.dataForm.authCode = '',
				this.dataForm.elementUri = '',
				this.dataForm.elementDesc = '',
				this.dataForm.elementType = '',
				this.dataForm.elementMethod = '',
				this.dataForm.menuCode = this.menuCode
			},
			//创建提交
			submitCreate(formName){
				const set = this.$refs
				set[formName].validate((valid) => {
					if (!valid) {
						return false
					}
					addSystemElement(this.dataForm).then(() => {
						this.dialogFormVisible = false
						this.$notify({
							title: '添加成功',
							message: '添加元素成功',
							type: 'success',
							duration: 2000,
							onClose: this.getDateList(this.menuCode)
						})
					})
				})
			},
			handleEdit(val){
				this.dialogStatus = 'update'
				findSystemElementDetail(val).then(response => {
					this.dataForm = response.data.responseData
					this.dialogFormVisible = true
				})
			},
			//更新提交
			submitUpdate(formName){
				const set = this.$refs
				set[formName].validate((valid) => {
					if (!valid) {
						return false
					}
					console.log('修改')
					editSystemElement(this.dataForm).then(() => {
						this.dialogFormVisible = false
						this.$notify({
							title: '修改成功',
							message: '修改元素成功',
							type: 'success',
							duration: 2000,
							onClose: this.getDateList(this.menuCode)
						})
						
					})
				})
			},
			//关闭弹出框
			cancel(formName) {
				this.dialogFormVisible = false
				this.$refs[formName].resetFields()
			},
		}
	}
</script>

<style>
</style>
